<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>

        <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>

        <script>
            $(function(){

                $("#username").blur(function(){


                    $.ajax("${pageContext.request.contextPath}/ajax/validateUsername",
                           {type:"POST",
                            data:{"username":$(this).val()},
                            dataType:"text",
                            success:function(message){
                               $("#usernameMessage").text(message);
                            }
                           });


                });

                $("#show").click(function () {

                    $.getJSON("${pageContext.request.contextPath}/ajax/getEmp",
                        function(emp){
                            $("#id").text(emp.id);
                            $("#name").text(emp.name);
                            $("#password").text(emp.password);
                            $("#email").text(emp.email);
                            $("#age").text(emp.age);
                            $("#phone").text(emp.phone);
                            $("#birthday").text(emp.birthday);
                        });

                });


            });
        </script>
    </head>
    <body>
        用户名:<input id="username" type="text" name="username"/>
        <span id="usernameMessage"></span>


        <hr/>

        <a id="show" href="javascript:;">显示数据</a>

        <hr/>
        编号：<span id="id"></span><br/>
        姓名：<span id="name"></span><br/>
        密码：<span id="password"></span><br/>
        邮箱：<span id="email"></span><br/>
        年龄：<span id="age"></span><br/>
        电话：<span id="phone"></span><br/>
        生日：<span id="birthday"></span><br/>




    </body>
</html>
